<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <div id="app">
        <div>
            <!-- render 函数不要去会写，只要理解功能就可以了 -->
            <pre v-pre class="note">
            vue 实例构建是无论是何种方式定义的页面模板结构，都会先转换为JS的对象【虚拟DOM对象】，在由render函数渲染成真正的容器页面；
            因此一旦vue程序构建时定义render函数，那么vue容器构建将跳过其它所有过程，直接以render函数的执行创建vue的容器页面；

            + render 通过 return 返回页面内容
            + 如果返回的内容是由HTML元素组成的结构，必须通过 虚拟DOM转换方法 h 完成
                        import { createApp,h } from "../assets/vue3/vue.esm-browser.js";
            + render 函数内部的this指向vue实例，所以通过this也可以直接访问仓库变量
            </pre>
            <h1>代码模板</h1>
            <input type="button" value="printOptions" @click="printOptions()">
        </div>
    </div>
    <script type="module">
        import { createApp,h } from "../assets/vue3/vue.esm-browser.js";
        /*
            h(tagName,contentString)
            h(tagName,[])
            h(tagName,attrsObject,contentString|[])
            

        */
        createApp({
            template:"<h1>template模板</h1>",
            render:function(){
                // return "<h1>render模板</h1>"
                // return h("h1","render模板")
                // return h("div",[
                //     "字符串",
                //     h("p","render模板1"),
                //     h("p","p标签"),
                //     h("p","render模板")
                // ])
                return [
                    "字符串",
                    h("p","render模板1"),
                    h("p","p标签"),
                    h("p","render模板"),
                    h("p","msg:"+this.msg),
                    h("input",{
                        type:"button",
                        value:this.btnName,
                        onClick:this.showTip
                    })
                ]

            },
            data() {
                return {
                    msg:"msg",
                    btnName:"提示"
                }
            },
            methods: {
                printOptions() {
                    console.log(this.$options)
                },
                showTip(){
                    alert(this.msg)
                }
            },
        }).mount("#app")
    </script>
</body>
</html>